<template>
  <el-dialog title="说明" :visible.sync="$attrs.visableIf" @close="handleCloseDialog" :close-on-click-modal="false" :close-on-press-escape="false" append-to-body width="1000px">
    <div class="ant-modal-body">
      <div class="wrap___1jsaD">
        <div class="summary___2ADLo"><img src="//s.yezgea02.com/common/JhufIs.png" alt="" class="icon___1w3Ln">
          <div>
            <div class="title___oRZDT">时间进程标签</div>
            <div class="desc___3JIZW">针对特定时间周期内的一系列关键运营节点而搭建的标签体系<br>可根据业务设置按时间轴进程，到指定时间点自动打标签，可设置多个分组，每组可设置一个场景对应的自动化规则</div>
          </div>
        </div>
        <div class="demo___Go2yJ">
          <div class="title___oRZDT">场景示例：孕周期</div>
          <div class="desc___3JIZW">跟客户沟通后，聊天侧边栏手动标记当前的孕周，后面会根据时间推进自动更新标签</div>
          <img src="//s.yezgea02.com/common/AxkT2f.png" alt="" class="step___dz77M">
          <div class="example___2V-5-">例如：<br>1. 准妈妈甲：沟通过程确认是孕1周 → 手动添加孕1周标签 → 28天后系统自动打上孕4周标签 → 依次执行<br>2. 准妈妈乙：沟通过程确认是孕4周 → 手动添加孕4周标签 → 28天后系统自动打上孕8周标签 → 依次执行</div>
          <div class="tips___3pglA">注意：时间进程标签必须在创建自动化规则后，再手动添加规则中的某一个标签才会触发自动化；规则创建前的已有标签的存量客户不会被触发</div>
          <span class="ant-tag ant-tag-has-color figure-title___14lsz" style="background-color: rgb(255, 230, 229);">功能界面</span><img src="//s.yezgea02.com/common/SMe39b.png" alt="" class="figure___5sm8y"></div>
      </div>
    </div>

    <div class="footer-btn" slot="footer">
      <el-button type="primary" @click="handleCloseDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'labelTips',
  components: {},
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  watch: {},

  methods: {
    handleCloseDialog() {
      this.$emit('update:visableIf', false);
      this.$emit('handleQuery');
      this.$emit('getFriendInfo', {})//把值传给父级
    }
  }
}
</script>

<style scoped lang="scss">
.wrap___1jsaD {
  width: 100%;
}

.summary___2ADLo {
  display: flex;
  align-items: flex-start;
  grid-gap: 12px;
  gap: 12px;
}

.summary___2ADLo .title___oRZDT {
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: rgba(0, 0, 0, .85);
}

.summary___2ADLo .desc___3JIZW {
  margin-top: 2px;
  color: rgba(0, 0, 0, .45);
}

.demo___Go2yJ {
  margin-top: 20px;
  border-top: 1px solid #e9e9e9;
}

img {
  max-width: 100%;
}

.summary___2ADLo .icon___1w3Ln {
  width: 56px;
  height: 56px;
}

::v-deep .summary___2ADLo .icon___1w3Ln {
  width: 56px;
  height: 56px;
}

::v-deep .el-dialog__body {
  max-height: 600px;
  overflow-y: auto;
}

.summary___2ADLo {
  display: flex;
  align-items: flex-start;
  grid-gap: 12px;
  gap: 12px;
}

.demo___Go2yJ {
  margin-top: 20px;
  border-top: 1px solid #e9e9e9;
}

.demo___Go2yJ .title___oRZDT {
  margin-top: 20px;
  font-size: 20px;
  color: #00c270;
}

.demo___Go2yJ .desc___3JIZW {
  margin-top: 4px;
  color: rgba(0, 0, 0, .45);
  margin-bottom: 10px;
}

.demo___Go2yJ .figure-title___14lsz {
  margin-top: 12px;
  color: rgba(0, 0, 0, .85);
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 10px;
}
.demo___Go2yJ .tips___3pglA {
  margin-top: 12px;
  color: #ff8243;
}
.footer-btn {
  display: flex;
  justify-content: flex-end;
}
</style>
